<template>
    <div>
    <el-card class="table-card" shadow="hover" v-loading="tableLoading" element-loading-text="数据加载中，请稍后"  
        element-loading-spinner="el-icon-loading">
        <div slot="header" class="table-header">
            <div class="table-title-wrapper">
                <span class="table-title">表格信息</span>
                <el-popover
                    placement="right"
                    width="340"
                    trigger="hover"
                    class="color-info-popover"
                >
                    <div class="color-guide-compact">
                        <div class="guide-header">
                            <i class="el-icon-info"></i>
                            <span class="guide-title">颜色说明</span>
                            <span class="guide-count">4种类型</span>
                        </div>
                        
                        <div class="guide-content">
                            <div class="guide-item">
                            
                                <div class="item-content">
                                    <div class="item-main">
                                        <span class="item-name">主导格</span>
                                        <div class="style-tag blue-tag">字体蓝色</div>
                                    </div>
                                    <div class="item-tip">控制相关单元格数据的主要单元格，用于数据关联和计算</div>
                                </div>
                            </div>
                            
                            <div class="guide-item">
                            
                                <div class="item-content">
                                    <div class="item-main">
                                        <span class="item-name">单独测点</span>
                                        <div class="style-tag red-tag">字体红色</div>
                                    </div>
                                    <div class="item-tip">独立测点数据，不与其他单元格关联，具有独立的数据源</div>
                                </div>
                            </div>
                            
                            <div class="guide-item">
                            
                                <div class="item-content">
                                    <div class="item-main">
                                        <span class="item-name">时间不变</span>
                                        <div class="style-tag green-tag">字体绿色</div>
                                    </div>
                                    <div class="item-tip">时间固定的单元格，不受时间筛选影响，保持固定数值</div>
                                </div>
                            </div>
                            
                            <div class="guide-item">
                            
                                <div class="item-content">
                                    <div class="item-main">
                                        <span class="item-name">自动填充格</span>
                                        <div class="style-tag yellow-tag">背景黄色</div>
                                    </div>
                                    <div class="item-tip">系统自动填充的单元格，数据由公式计算得出</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <i class="header-icon el-icon-info info-icon" slot="reference"></i>
                </el-popover>
            </div>
            
            <div class="table-actions">
                <el-button 
                    type="danger" 
                    size="small" 
                    icon="el-icon-delete" 
                    @click="handleDelTable" 
                    v-if="tableData.length > 0 && showRoleDel"
                    class="delete-btn"
                >
                    删除表格
                </el-button>
            </div>
        </div>
        
        <div class="table-content">
            <div class="table-wrapper" ref="table-wrapper">
                <div class="table-tips" v-if="tableData.length > 0">📝 可通过右键点击数据表格中的单元格，唤出操作菜单，执行相关操作。</div>
                <ve-table
                    fixed-header
                    :show-header="false"
                    :max-height="tableHeight"
                    :columns="columns"
                    :table-data="tableData"
                    :rowStyleOption="rowStyleOption"
                    :contextmenu-body-option="contextmenuBodyOption"
                    rowKeyFieldName="rowKey"
                    :editOption="editOption"
                    :clipboard-option="clipboardOption"
                    :cell-span-option="cellSpanOption"
                    :cell-style-option="cellStyleOption"
                    :eventCustomOption="eventCustomOption"
                    border-y
                    v-if="tableData.length > 0"
                />
                
                <!-- 悬停提示弹窗 -->
                <div class="cell-tooltip" ref="cellTooltip" v-show="tableTips.length > 0">
                    <div class="tooltip-header">
                        <i class="el-icon-info tooltip-icon"></i>
                        <span class="tooltip-title">单元格信息</span>
                    </div>
                    <div class="tooltip-content">
                        <div v-for="(item,index) in tableTips" :key="index" class="tooltip-item">
                            <span class="tooltip-bullet">•</span>
                            <span class="tooltip-text">{{item}}</span>
                        </div>
                    </div>
                    <div class="tooltip-arrow" ref="tooltipArrow"></div>
                </div>
                
                <noData showData v-if="tableData.length == 0" class="no-data-placeholder"/>
            </div>
        </div>
    </el-card>

    <!-- 设置时间对话框 -->
    <el-dialog
        title="设置时间"  
        v-dialogDrag 
        :visible.sync="timeTableCellDialog" 
        width="500px"
        class="time-setting-dialog"
    >
        <div class="dialog-content">
            <el-form ref="timeForm" :model="timeTableCellForm" size="medium" class="time-form">
                <!-- 模式选择 -->
                <div class="form-section">
                    <div class="section-header">
                        <span class="section-title">时间模式</span>
                        <el-tooltip content="选择时间模式，时间不变模式下单元格时间将固定不变" placement="top">
                            <i class="el-icon-question help-icon"></i>
                        </el-tooltip>
                    </div>
                    <div class="mode-selector">
                        <div 
                            class="mode-option" 
                            :class="{ active: timeTableCellForm.sign == 0 }"
                            @click="timeTableCellForm.sign = 0"
                        >
                            <i class="el-icon-time"></i>
                            <span>常规模式</span>
                            <small>时间随筛选变化</small>
                        </div>
                        <div 
                            class="mode-option" 
                            :class="{ active: timeTableCellForm.sign == 3 }"
                            @click="timeTableCellForm.sign = 3"
                        >
                            <i class="el-icon-lock"></i>
                            <span>时间不变</span>
                            <small>时间固定不变</small>
                        </div>
                    </div>
                </div>

                <!-- 时间类型设置 -->
                <div class="form-section" v-show="timeTableCellForm.sign == 3">
                    <div class="section-header">
                        <span class="section-title">时间类型</span>
                        <el-tooltip content="选择时间显示方式" placement="top">
                            <i class="el-icon-question help-icon"></i>
                        </el-tooltip>
                    </div>
                    <div class="type-selector">
                        <div 
                            class="type-option" 
                            :class="{ active: timeTableCellForm.dtModeID == 4 }"
                            @click="timeTableCellForm.dtModeID = 4"
                        >
                            <i class="el-icon-date"></i>
                            <span>截止时间</span>
                        </div>
                        <div 
                            class="type-option" 
                            :class="{ active: timeTableCellForm.dtModeID == 3 }"
                            @click="timeTableCellForm.dtModeID = 3"
                        >
                            <i class="el-icon-time"></i>
                            <span>时间段</span>
                        </div>
                    </div>
                </div>

                <!-- 时间设置 -->
                <div class="form-section" v-show="timeTableCellForm.sign == 3">
                    <div class="section-header">
                        <span class="section-title">时间设置</span>
                    </div>
                    <div class="time-picker-container">
                        <div v-if="timeTableCellForm.dtModeID == 4" class="single-date">
                            <el-date-picker
                                v-model="timeTableCellForm.DT1"
                                type="date"
                                format="yyyy年MM月dd日"
                                value-format="yyyy/MM/dd"
                                placeholder="选择截止日期"
                                class="compact-date-picker"
                                :popper-class="'time-picker-popper'"
                            >
                            </el-date-picker>
                        </div>
                        <div v-if="timeTableCellForm.dtModeID == 3" class="date-range">
                            <div class="range-group">
                                <el-date-picker
                                    v-model="timeTableCellForm.DT1"
                                    type="date"
                                    format="yyyy年MM月dd日"
                                    value-format="yyyy/MM/dd"
                                    placeholder="开始日期"
                                    class="compact-date-picker"
                                    :popper-class="'time-picker-popper'"
                                >
                                </el-date-picker>
                                <span class="range-separator">至</span>
                                <el-date-picker
                                    v-model="timeTableCellForm.DT2"
                                    type="date"
                                    format="yyyy年MM月dd日"
                                    value-format="yyyy/MM/dd"
                                    placeholder="结束日期"
                                    class="compact-date-picker"
                                    :popper-class="'time-picker-popper'"
                                >
                                </el-date-picker>
                            </div>
                        </div>
                    </div>
                </div>
            </el-form>
            </div>
            <div class="dialog-footer">
                <el-button @click="timeTableCellDialog = false" size="small" class="cancel-btn" icon="el-icon-circle-close">
                    取消
                </el-button>
                <el-button 
                    type="primary" 
                    @click="handleSaveTimeCellDialog" 
                    size="small" 
                    class="confirm-btn"
                    icon="el-icon-upload"
                >
                    保存配置
                </el-button>
            </div>   
        </el-dialog>
    </div>    
</template>
<script>
import {setTableCell,setColOrRowCellsTime } from "@/api/https";
import noData from '@/components/base/noData.vue'
export default ({
    components:{noData},
    props:{
        tableLoading:{
            type:Boolean,
            default:false
        },
        tableHeight:{
            type:String,
            default:''
        },
        columns:{
            type:Array,
            default:()=>{
                return []
            }
        },
        tableData:{
            type:Array,
            default:()=>{
                return []
            }
        },
        tableRealData:{
            type:Array,
            default:()=>{
                return []
            }
        },
        mergeData:{
            type:Array,
            default:()=>{
                return []
            }
        },
        merged:{
            type:Array,
            default:()=>{
                return []
            }
        },
        showRoleDel:{
            type:Number,
            default:0,
        }
    },
    mounted(){
        
    },
    watch: {
        visible(newVal) {
            if(newVal){
                this.dialogVisible = newVal
                this.handleGetTreeStyle()
                this.getDefaultData()
            }
        },
        dialogVisible(newVal) {
            this.$emit('update:visible', newVal)
        }
    },
    data() {
        return {
            timeTableCellDialog:false,
            timeTableCellForm:{},
            tableTips:[],
            rowStyleOption: {
                clickHighlight: false,
                hoverHighlight: false,
            },
            contextmenuBodyOption:{
                contextmenus: [
                    {
                        type:'timeInvariantRow',
                        label:'设置整行时间'
                    },{
                        type:'timeInvariantCol',
                        label:'设置整列时间'
                    },
                    {
                        type: "timeInvariant",
                        label: "设置时间",
                        disabled:false,
                    }
                ],
                afterMenuClick: ({ type, selectionRangeKeys, selectionRangeIndexes })=> {
                    this.hanldeAfterMenuClick(type, selectionRangeKeys, selectionRangeIndexes)
                }
            },
            editOption:{
                afterCellValueChange:({ row, column, changeValue }) => {
                    const rowIndex = row.rowKey - 1
                    const field = column.field 
                    const _d = this.tableRealData[rowIndex][field]
                    if(_d && changeValue != _d.text){
                        const cellData = {..._d}
                        cellData.dataTp = 1
                        this.$emit('handleSetCellTable',cellData,changeValue)
                    }
                }
            },
            timeInvariant:'',
            clipboardOption:{
                copy: true,
                paste: false,
                cut: false,
                delete: false,
            },
            cellSpanOption:{
                bodyCellSpan: this.bodyCellSpan,
            },
            cellStyleOption:{
                bodyCellClass: ({ row, column, rowIndex }) => {
                    // isAuto 0不是自动填充格1是自动填充
                    // sign 0从属单元格 1主导单元格 2单独测点 3时间不变 4文本
                    const data = this.tableRealData[rowIndex][column.field]
                    if(data){
                        if(data.sign == 3 && data.isAuto == 1){
                            // 时间不变
                            return "table-body-cell3 table-body-cell1-bg";
                        }
                        
                        if(data.sign == 3 && data.isAuto == 0){
                            return "table-body-cell3"
                        }

                        if(data.sign == 2 && data.isAuto == 1){
                            // 单独测点
                            return "table-body-cell2 table-body-cell1-bg";
                        }
                        
                        if(data.sign == 2 && data.isAuto == 0){
                            return "table-body-cell2"
                        }

                        if(data.sign == 1 && data.isAuto == 1){
                            // 主导格
                            return "table-body-cell1 table-body-cell1-bg";
                        }
                        
                        if(data.sign == 1 && data.isAuto == 0){
                            return "table-body-cell1";
                        }

                        if(data.isAuto == 1){
                            return "table-body-cell1-bg";
                        }
                    }
                }
            },
            eventCustomOption:{
                bodyCellEvents:({row,column,rowIndex})=>{
                return {
                    mouseover: (event) => {
                    const data = this.tableRealData[rowIndex][column.field]
                    if(data && data.tips && data.tips.length > 0){
                        this.showTooltip(event, data.tips)
                    }else{
                        this.hideTooltip()
                    }
                    },
                    mouseleave:(event)=>{
                    this.hideTooltip()
                    }
                }
                },
            },
            tooltipVisible: false,
            tableTips:[],
        }
    },
    methods:{
        hanldeAfterMenuClick(type, selectionRangeKeys, selectionRangeIndexes){
            if(type == 'timeInvariant'){
              const rowIndex = selectionRangeIndexes.startRowIndex
              const field = selectionRangeKeys.startColKey
              const _data = this.tableRealData[rowIndex][field]
              this.timeTableCellForm = {..._data}
              this.timeInvariant = true
              this.timeTableCellDialog = true
            }

            if(type == 'timeInvariantRow'){
                const rowIndex = selectionRangeIndexes.startRowIndex
                const field = selectionRangeKeys.startColKey
                const _data = this.tableRealData[rowIndex][field]
                this.timeTableCellForm = {
                    ..._data,
                    tp:1,
                    num:_data.row
                }
                this.timeInvariant = false
                this.timeTableCellDialog = true
            }

            if(type == 'timeInvariantCol'){
                const rowIndex = selectionRangeIndexes.startRowIndex
                const field = selectionRangeKeys.startColKey
                const _data = this.tableRealData[rowIndex][field]
                this.timeTableCellForm = {
                    ..._data,
                    tp:2,
                    num:_data.col,
                    
                }
                this.timeInvariant = false
                this.timeTableCellDialog = true
            }
        },
        // 显示悬停提示弹窗
        showTooltip(event, tips) {
            this.tableTips = tips;
            this.tooltipVisible = true;
            
            this.$nextTick(() => {
                const tooltip = this.$refs.cellTooltip;
                const arrow = this.$refs.tooltipArrow;
                
                if (!tooltip) return;
                
                // 获取表格容器的边界
                const tableRect = this.$refs['table-wrapper'].getBoundingClientRect();
                
                // 计算鼠标位置相对于表格容器的位置
                const mouseX = event.clientX;
                const mouseY = event.clientY;
                
                // 设置弹窗位置 - 默认显示在鼠标右下方
                let left = mouseX - tableRect.left + 15;
                let top = mouseY - tableRect.top + 15;
                
                // 确保弹窗不会超出表格容器边界
                const tooltipWidth = tooltip.offsetWidth;
                const tooltipHeight = tooltip.offsetHeight;
                
                // 水平方向边界检查
                if (left + tooltipWidth > tableRect.width) {
                    left = mouseX - tableRect.left - tooltipWidth - 15;
                    // 调整箭头位置
                    arrow.style.left = 'auto';
                    arrow.style.right = '-6px';
                    arrow.style.transform = 'rotate(45deg)';
                } else {
                    arrow.style.left = '-6px';
                    arrow.style.right = 'auto';
                    arrow.style.transform = 'rotate(225deg)';
                }
                
                // 垂直方向边界检查
                if (top + tooltipHeight > tableRect.height) {
                    top = mouseY - tableRect.top - tooltipHeight - 15;
                    // 调整箭头位置
                    arrow.style.top = 'auto';
                    arrow.style.bottom = '-6px';
                    arrow.style.transform = 'rotate(135deg)';
                } else {
                    arrow.style.top = '12px';
                    arrow.style.bottom = 'auto';
                }
                
                tooltip.style.left = left + 'px';
                tooltip.style.top = top + 'px';
            });
        },
        // 隐藏悬停提示弹窗
        hideTooltip() {
            this.tooltipVisible = false;
            this.tableTips = [];
        },
        handleDelTable(){
            this.$emit('handleDelTable')
        },
        handleSaveTimeCellDialog(){
            this.$emit('handleSaveTimeCellDialog',this.timeTableCellForm,this.timeInvariant)
            this.timeInvariant = ''
        },
        bodyCellSpan({ row, column, rowIndex }) {
            if(this.mergeData.length > 0){
                for(let i=0; i<this.mergeData.length; i++){
                if(this.mergeData[i].rowIndex == rowIndex){
                    if(column.field == this.mergeData[i].field){
                    return {
                        rowspan:this.mergeData[i].rowspan,
                        colspan:this.mergeData[i].colspan
                    }
                    }
                }
                }
            }
            if(this.merged.length > 0){
                for(let i=0; i<this.merged.length; i++){
                if(this.merged[i].rowIndex == rowIndex){
                    if(column.field == this.merged[i].field){
                    return {
                        rowspan:0,
                        colspan:0
                    }
                    }
                }
                }
            }
        },
        handleSaveTimeCellDialog(){
            const _data = {
                tableID:this.timeTableCellForm.TableID,
                sign:this.timeTableCellForm.sign,
                tp:this.timeTableCellForm.tp,
                num:this.timeTableCellForm.num,
                bTime:this.timeTableCellForm.DT1,
                eTime:this.timeTableCellForm.DT2
            }
            if(!this.timeInvariant){
                setColOrRowCellsTime(_data).then(res=>{
                    if(res.isSuccess){
                        this.$emit('getTableList')
                        this.timeTableCellDialog = false
                        this.timeTableCellForm = {}
                    }else{
                        this.$message.error(res.errorMessage)
                    }
                })
            }else{
                const _data = {...this.timeTableCellForm}
                if(_data.dtModeID < 3){
                    _data.DT2 = ''
                }

                if(this.timeTableCellForm.CODE_ID == null || this.timeTableCellForm.CODE_ID == ''){
                    _data.CODE_ID = []
                }else{
                    _data.CODE_ID = this.timeTableCellForm.CODE_ID.split(',')
                }
                
                setTableCell(_data).then(res=>{
                    if(res.isSuccess){
                        this.$emit('refreshTableCell',res.data)
                        this.timeTableCellDialog = false
                        this.timeTableCellForm = {}
                    }else{
                        this.$message.error(res.errorMessage)
                    }
                })
            }
        },
       
    }
})
</script>
<style lang="scss" scoped>
.table-card {
    border-radius: 4px;
    border: none;
    
    ::v-deep .el-card__header {
        padding: 10px;
        border-bottom: 1px solid #ebeef5;
        background-color: #fafbfc;
    }
}

::v-deep .el-card__body{
    padding:0 20px 20px 20px;
}

.table-card {

    .table-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding:0 12px;
        
        .table-title-wrapper {
            display: flex;
            align-items: center;
            
            .table-title {
                font-weight: 600;
                color: #303133;
                margin-right: 8px;
            }
            
            .info-icon {
                color: #409EFF;
                cursor: pointer;
                font-size: 16px;
            }
        }
        
        .table-actions {
            display: flex;
            gap: 8px;
        }
    }
    
    .table-content {
        flex: 1;
        overflow: hidden;
        position: relative;
        
        .table-wrapper {
            height: 100%;
            position: relative;
            
            // 单元格悬停提示弹窗
            .cell-tooltip {
                position: absolute;
                z-index: 9999;
                background: #fff;
                border-radius: 8px;
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
                border: 1px solid #e4e7ed;
                max-width: 320px;
                min-width: 200px;
                padding: 0;
                animation: tooltipFadeIn 0.2s ease-out;
                
                .tooltip-header {
                    display: flex;
                    align-items: center;
                    padding: 12px 16px;
                    background: linear-gradient(135deg, #f0f7ff 0%, #e6f3ff 100%);
                    border-bottom: 1px solid #e4e7ed;
                    border-radius: 8px 8px 0 0;
                    
                    .tooltip-icon {
                        color: #409EFF;
                        font-size: 16px;
                        margin-right: 8px;
                    }
                    
                    .tooltip-title {
                        font-weight: 600;
                        color: #303133;
                        font-size: 14px;
                    }
                }
                
                .tooltip-content {
                    padding: 12px 16px;
                    max-height: 200px;
                    overflow-y: auto;
                    
                    .tooltip-item {
                        display: flex;
                        align-items: flex-start;
                        margin-bottom: 8px;
                        
                        &:last-child {
                            margin-bottom: 0;
                        }
                        
                        .tooltip-bullet {
                            color: #409EFF;
                            margin-right: 8px;
                            font-weight: bold;
                            flex-shrink: 0;
                            margin-top: 1px;
                        }
                        
                        .tooltip-text {
                            color: #606266;
                            font-size: 13px;
                            line-height: 1.5;
                            word-break: break-word;
                        }
                    }
                }
                
                .tooltip-arrow {
                    position: absolute;
                    width: 12px;
                    height: 12px;
                    background: #fff;
                    border: 1px solid #e4e7ed;
                    border-top: none;
                    border-left: none;
                    transform: rotate(225deg);
                }
            }
            
            .no-data-placeholder {
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
    }
}
.color-guide-compact {
    .guide-header {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom: 1px solid #f0f2f5;
        
        i {
            color: #409EFF;
            font-size: 16px;
        }
        
        .guide-title {
            font-size: 14px;
            font-weight: 600;
            color: #303133;
        }
        
        .guide-count {
            margin-left: auto;
            padding: 2px 6px;
            background: #f0f2f5;
            color: #606266;
            border-radius: 8px;
            font-size: 11px;
            font-weight: 500;
        }
    }
    
    .guide-content {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    
    .guide-item {
        display: flex;
        align-items: flex-start;
        gap: 6px;
        padding:8px;
        transition: all 0.3s ease;
        border: 1px solid transparent;
        
        &:hover {
            border-color: #409EFF;
            background: #f8fafc;
            transform: translateX(2px);
        }
        
        .item-color {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            background: #f8fafc;
            border: 1px solid #f0f2f5;
            
            .color-sample {
                width: 20px;
                height: 20px;
                border-radius: 4px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 12px;
                font-weight: 700;
                background: white;
            }
        }
        
        .item-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        
        .item-main {
            display: flex;
            align-items: center;
            gap: 8px;
            
            .item-name {
                font-size: 13px;
                font-weight: 600;
                color: #303133;
            }
            
            .style-tag {
                padding: 2px 8px;
                border-radius: 6px;
                font-size: 11px;
                font-weight: 600;
                border: 1px solid;
            }
            
            .blue-tag {
                color: #409EFF;
                background: rgba(64, 158, 255, 0.1);
                border-color: rgba(64, 158, 255, 0.3);
            }
            
            .red-tag {
                color: #F56C6C;
                background: rgba(245, 108, 108, 0.1);
                border-color: rgba(245, 108, 108, 0.3);
            }
            
            .green-tag {
                color: #67C23A;
                background: rgba(103, 194, 58, 0.1);
                border-color: rgba(103, 194, 58, 0.3);
            }
            
            .yellow-tag {
                color: #E6A23C;
                background: rgba(230, 162, 60, 0.1);
                border-color: rgba(230, 162, 60, 0.3);
            }
        }
        
        .item-tip {
            font-size: 11px;
            line-height: 1.4;
            color: #606266;
            margin: 0;
        }
    }
}



// 弹窗动画
@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.time-setting-dialog {
    .dialog-content {
        padding: 20px;
    }
    
    .time-form {
        .form-section {
            margin-bottom: 20px;
            
            &:last-child {
                margin-bottom: 0;
            }
            
            .section-header {
                display: flex;
                align-items: center;
                gap: 6px;
                margin-bottom: 12px;
                
                .section-title {
                    font-size: 14px;
                    font-weight: 600;
                    color: #303133;
                }
                
                .help-icon {
                    color: #909399;
                    cursor: help;
                    font-size: 14px;
                }
            }
        }
        
        .mode-selector {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            
            .mode-option {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 6px;
                padding: 12px;
                border: 1px solid #e4e7ed;
                border-radius: 6px;
                cursor: pointer;
                transition: all 0.2s ease;
                background: #fafbfc;
                
                &:hover {
                    border-color: #409EFF;
                    background: #f0f7ff;
                }
                
                &.active {
                    border-color: #409EFF;
                    background: #ecf5ff;
                    
                    i {
                        color: #409EFF;
                    }
                    
                    span {
                        color: #409EFF;
                        font-weight: 600;
                    }
                }
                
                i {
                    font-size: 18px;
                    color: #909399;
                    transition: all 0.2s ease;
                }
                
                span {
                    font-size: 13px;
                    font-weight: 500;
                    color: #606266;
                    transition: all 0.2s ease;
                }
                
                small {
                    font-size: 11px;
                    color: #909399;
                }
            }
        }
        
        .type-selector {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            
            .type-option {
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 10px 12px;
                border: 1px solid #e4e7ed;
                border-radius: 6px;
                cursor: pointer;
                transition: all 0.2s ease;
                background: #fafbfc;
                
                &:hover {
                    border-color: #409EFF;
                    background: #f0f7ff;
                }
                
                &.active {
                    border-color: #409EFF;
                    background: #ecf5ff;
                    
                    i {
                        color: #409EFF;
                    transform: scale(1.1);
                    font-weight: bold;
                    background: rgba(64, 158, 255, 0.1);
                    padding: 4px;
                        border-radius: 4px;
                    }
                    
                    span {
                        color: #409EFF;
                        font-weight: 600;
                    }
                }
                
                i {
                    font-size: 16px;
                    color: #909399;
                    transition: all 0.2s ease;
                }
                
                span {
                    font-size: 13px;
                    color: #606266;
                    transition: all 0.2s ease;
                }
            }
        }
        
        .time-picker-container {
            .single-date, .date-range {
                .compact-date-picker {
                    width: 100%;
                    
                    ::v-deep .el-input__inner {
                        border-radius: 6px;
                        border: 1px solid #e4e7ed;
                        transition: all 0.2s ease;
                        
                        &:focus {
                            border-color: #409EFF;
                            box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
                        }
                    }
                }
            }
            
            .date-range {
                .range-group {
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    
                    .compact-date-picker {
                        flex: 1;
                    }
                    
                    .range-separator {
                        font-size: 12px;
                        color: #909399;
                        font-weight: 500;
                        flex-shrink: 0;
                    }
                }
            }
        }
    }
}

::v-deep .time-picker-popper {
    .el-picker-panel {
        border-radius: 6px;
        border: 1px solid #e4e7ed;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    }
    
    .el-date-table td.current:not(.disabled) .el-date-table-cell__text {
        background: #409EFF;
    }
}
.table-tips{
    margin-top: 10px;
}
</style>